<template>
	<view>

		<view class='info'>
			<view class='movieName'>{{movieName}}</view>
			<view class='planDetail'>{{planDetail}}</view>

			<view class='planDetail'>{{hallName}}</view>
			<!-- 使用时注释dom view class='about' 即可 .about css 在app.wxss中 -->
			<view class='about' @click="about()">
				<u-button text="关于" size="small" color="rgb(10, 185, 156)"></u-button>
			</view>
		</view>

		<view class="seatDemosBack">
			<view class="seatDemos">
				<template v-for="seatTypeItem in seatTypeList">
					<div class="seatDemo" :key="seatTypeItem.type"
						v-if="seatTypeItem.isShow=='1' && seatTypeItem.position==='up'">
						<img class="seatDemoItem" :src="seatTypeItem.icon" />
						<span class="seatDemoItem">{{seatTypeItem.name}}</span>
					</div>
				</template>
			</view>
		</view>


		<!-- 选座位 -->

		<movable-area scale-area="true" class="defaultArea" style="width: 750rpx; height: 750px;">
			<movable-view class='movableOne' style="width: 750rpx; height: 750px;" scale="true" direction="all"
				scale-max="2" scale-min="1" out-of-bounds="true">
				<view class='seatArea'
					:style="{width:seatScaleHeight * maxX +'px',height: seatScaleHeight * maxY +'px'}">
					<view class='alignLine'></view>
					<view class='hallName'>
						<text>大门</text>
					</view>
					<view v-for="(item,index) in seatList" :key="index" class="seatTap" :style="{height:seatScaleHeight +'px',width:seatScaleHeight +'px',
			            top:(item.grow-1) * seatScaleHeight +'px',left:(item.gcol-1) * seatScaleHeight +'px'}"
						@click="handleScale(item)">
						<image :src="item.nowIcon" class="normal" />
					</view>
				</view>
			</movable-view>

		</movable-area>


		<view class='selectSeatInfo' v-if="!hidden">
			<scroll-view class="scrollSeat" scroll-x style="width: 100%">
				<!-- 普通座位 -->
				<block v-for="(item,index) in selectedSeat" :key="index">
					<view class='scrollItem' @click="handleScale(item)">
						<view class='scrollTextTop'>
							{{item.row}}排{{item.col}}座
						</view>

						<u-icon name="close" color="#2979ff" size="28"></u-icon>
					</view>
				</block>
			</scroll-view>
		</view>
		<!-- 快速选座 -->
		<view class='selectSeatInfo' v-else>
			<div class="text">快速选座:</div>
			<scroll-view class="scrollSeat" scroll-x style="width: 100%">
				<view class='quickItem' @click='quickSeat(1)'>
					1人座
				</view>
				<view class='quickItem' @click='quickSeat(2)'>
					2人座
				</view>
				<view class='quickItem' @click='quickSeat(3)'>
					3人座
				</view>
				<view class='quickItem' @click='quickSeat(4)'>
					4人座
				</view>
			</scroll-view>
		</view>

		<view class='orderComfirm' style="flex-direction:row;">
			<view class="comfirm" @click="createOrder()">确认选座</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				movieName: undefined,
				planDetail: undefined,
				seatList: [],
				selectedSeat: [],
				hallName: undefined,
				scaleValue: 1,
				hidden: true,
				maxSelect: 1,
				totalPrice: 0,
				loadComplete: false,
				timer: null,
				seatTypeList: [],
				seatScaleHeight: 0,
				maxX: 0,
				seatScale: 0,
				seatArea: 200,
				rpxToPx: uni.getSystemInfoSync().screenWidth / 750,
				maxY: 0,
				seatAreaId: 0,

			}
		},
		methods: {
			about()
			{	
				console.log("a");
				uni.navigateTo({
					url:'/pages/bottom-nav/rule/rule'
				})
			},
			createOrder() {
				console.log(this.selectedSeat[0].id);
				uni.showModal({
					content: '确定选这个位置',
					success: (res) => {
						if (res.confirm) {
							uni.$u.http.get('/app/seat/Template/' + this.selectedSeat[0].id).then(res => {

								if (res.code == 0) {
									uni.$emit('handleSuccess', true)

									setTimeout(() => {
										uni.navigateTo({
											url: "/pages/fun/confirm_seat/confirm_seat"
										})
									}, 2000)
								}

							})
						} else if (res.cancel) {
							uni.showToast({
								icon: 'none',
								title: '你点击了取消'
							})
						}
					}
				});
			},
			quickSeat(item) {
				if (item != 1) {
					uni.showToast({
						title: '最多只能选择' + this.maxSelect + '个座位哦~',
						icon: 'error',
						duration: 2000
					})
				} else {
					uni.$u.throttle(this.toNext, 2000)
				}

			},
			// 得到数据
			toNext() {

				uni.$u.http
					.get('/app/appoint/getAppointRandom/' + this.seatAreaId).then(res => {
						if (res.data == null) {
							uni.showToast({
								title: '没有合适的座位~',
								icon: 'none',
								duration: 2000
							})
						} else {
							let index = this.seatList.findIndex(item => {
								return item.id == res.data.id
							});

							this.seatList[index].type = "0-1";
							this.processUnSelected(index)

						}


					})
			},
			handleScale(item) {
				console.log(item);
				let index = this.seatList.findIndex(j => {
					return j.id == item.id
				})
				if (this.seatList[index].canClick) {
					if (this.seatList[index].nowIcon === this.seatList[index].selectedIcon) {
						this.processSelected(index)
					} else {
						this.processUnSelected(index)
					}
				}
			},


			// 处理已选的座位
			processSelected(index) {
				let _selectedSeatList = this.selectedSeat
				let seatList = this.seatList

				// 改变这些座位的图标为初始图标 并 移除id一样的座位
				seatList[index].nowIcon = seatList[index].defautIcon
				for (const key in _selectedSeatList) {
					if (_selectedSeatList[key].id === seatList[index].id) {
						_selectedSeatList.splice(key, 1)
					}
				}
				this.selectedSeat = _selectedSeatList
				this.seatList = seatList
				this.hidden = !this.hidden
			},
			// 处理未选择的座位
			processUnSelected(index) {
				let _selectedSeatList = this.selectedSeat
				let seatList = this.seatList
				let otherLoveSeatIndex = seatList[index].otherLoveSeatIndex

				// 如果选中的是非情侣座位 判断选择个数不大于 maxSelect
				if (_selectedSeatList.length >= this.maxSelect) {
					uni.showToast({
						title: '最多只能选择' + this.maxSelect + '个座位哦~',
						icon: 'none',
						duration: 2000
					})
					return
				}
				// 改变这些座位的图标为已选择图标
				seatList[index].nowIcon = seatList[index].selectedIcon
				// 记录 orgIndex属性 是原seatList数组中的下标值
				seatList[index].orgIndex = index
				// 把选择的座位放入到已选座位数组中
				let temp = {
					...seatList[index]
				}
				_selectedSeatList.push(temp)


				this.selectedSeat = _selectedSeatList,
					this.seatList = seatList,
					this.hidden = !this.hidden

			},




			prosessSeatList(response) {

				let resSeatList = response.seatList
				resSeatList.forEach(element => {
					// 获取座位的类型的首字母
					let firstNumber = element.type.substr(0, 1)
					// 在原来的对象中加入两个属性  otherLoveSeatIndex 对应情侣座位的原数组下标 otherLoveSeatId  对应情侣座位的Id
					element.otherLoveSeatIndex = null
					element.otherLoveSeatId = null

					// 加载座位的图标
					let seatType = response.seatTypeList;
					for (const key in seatType) {
						// 加载每个座位的初始图标defautIcon 和 当前图标 nowIcon
						if (element.type === seatType[key].type) {
							element.nowIcon = seatType[key].icon
							element.defautIcon = seatType[key].icon
						}
						// 根据首字母找到对应的被选中图标
						if (firstNumber + '-1' === seatType[key].type) {
							element.selectedIcon = seatType[key].icon
						}
						// 根据首字母找到对应的被选中图标
						if (firstNumber + '-2' === seatType[key].type) {
							element.soldedIcon = seatType[key].icon
						}
						// 根据首字母找到对应的被选中图标
						if (firstNumber + '-3' === seatType[key].type) {
							element.fixIcon = seatType[key].icon
						}
					}
					// 如果座位是已经售出 和 维修座位 加入属性canClick 判断座位是否可以点击
					if (element.defautIcon === element.soldedIcon || element.defautIcon === element.fixIcon) {
						element.canClick = false
					} else {
						element.canClick = true
					}
				})
				return resSeatList
			},

			//计算最大座位数,生成影厅图大小
			prosessMaxSeat(value) {
				let seatList = value
				let maxY = 0;
				for (let i = 0; i < seatList.length; i++) {
					let tempY = seatList[i].grow;
					if (parseInt(tempY) > parseInt(maxY)) {
						maxY = tempY;
					}
				}
				let maxX = 0;
				for (var i = 0; i < seatList.length; i++) {
					var tempX = seatList[i].gcol;
					if (parseInt(tempX) > parseInt(maxX)) {
						maxX = tempX;
					}
				}
				let seatRealWidth = parseInt(maxX) * 70 * this.rpxToPx
				let seatRealheight = parseInt(maxY) * 70 * this.rpxToPx
				let seatScale = 1;
				let seatScaleX = 1;
				let seatScaleY = 1;
				let seatAreaWidth = 630 * this.rpxToPx
				let seatAreaHeight = this.seatArea - 200 * this.rpxToPx
				if (seatRealWidth > seatAreaWidth) {
					seatScaleX = seatAreaWidth / seatRealWidth
				}
				if (seatRealheight > seatAreaHeight) {
					seatScaleY = seatAreaHeight / seatRealheight
				}
				if (seatScaleX < 1 || seatScaleY < 1) {
					seatScale = seatScaleX < seatScaleY ? seatScaleX : seatScaleY
				}

				this.maxY = parseInt(maxY),
					this.maxX = parseInt(maxX),
					this.seatScale = seatScale,
					this.seatScaleHeight = seatScale * 70 * this.rpxToPx

			},
			// 座位左边栏的数组
			seatToolArr() {
				let seatToolArr = []
				let yMax = this.maxY
				let seatList = this.seatList
				for (let i = 1; i <= yMax; i++) {
					let el = ''
					for (let j = 0; j < seatList.length; j++) {
						if (parseInt(seatList[j].grow) === i) {
							el = seatList[j].row
						}
					}
					seatToolArr.push(el)
				}

				this.seatToolArr = seatToolArr

			},

			// 根据seatList 生成一个类map的对象 key值为grow坐标 value值为grow为key值的数组
			creatSeatMap() {
				let seatList = this.seatList
				var obj = {}
				for (let index in seatList) {
					let seatrowList = seatList[index].grow
					if (seatrowList in obj) {
						// 原本数组下标
						seatList[index].orgIndex = index
						obj[seatrowList].push(seatList[index])
					} else {
						let seatArr = []
						// 原本数组下标
						seatList[index].orgIndex = index
						seatArr.push(seatList[index])
						obj[seatrowList] = seatArr
					}
				}
				this.seatMap = obj
			},
		},
		onLoad(params) {
			this.seatAreaId = params.id
			uni.showLoading({
				title: '加载中',
			})
			this.seatArea = uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - (480 * uni
				.getSystemInfoSync().screenWidth / 750);
			uni.$u.http
				.get('/app/seat/getSeatlist/' + this.seatAreaId).then(res => {
					let result = res.data;
					if (res.code == 0) {
						let seatList = this.prosessSeatList(result);
						this.movieName = result.movieName,
							this.planDetail = result.showTime,
							this.hallName = result.name,
							this.seatList = seatList,
							this.seatTypeList = result.seatTypeList,
							this.selectedSea = [],
							this.totalPrice = 0,
							this.seatArea = this.seatArea
						//计算X和Y坐标最大值
						this.prosessMaxSeat(seatList);
						//计算左侧座位栏的数组
						this.seatToolArr()
						//按每排生成座位数组对象
						this.creatSeatMap()

						uni.hideLoading()

					}

				})



		}
	}
</script>

<style>
	.movieName {
		font-size: 35rpx;
		font-weight: 600;
		margin-bottom: 10rpx;
	}

	.about {
		position: absolute;
		right: 80rpx;
		top: 50%;
		transform: translateY(-50%)
	}


	/*
	*上方排期信息样式
	*/

	.planDetail {
		color: #aaa;
		font-size: 27rpx;
	}

	/*
	*上方影片,排期信息的父级
	*/

	.info {
		width: 100%;
		height: 80rpx;
		background: #fff;
		border-top: 1rpx solid #eee;
		border-bottom: 1rpx solid #eee;
		padding: 30rpx 30rpx;
		position: relative;
	}

	.seatDemosBack {
		background: #fff;
	}

	/*
	*座位样式的父级
	*/

	.seatDemos {
		color: #aaa;
		background: #fff;
		position: relative;
		margin: 0 auto;
		width: 80%;
		box-sizing: border-box;
		font-size: 25rpx;
		height: 70rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.areaSeatDemos {
		width: 100%;
		height: 80rpx;
		position: fixed;
		bottom: 100rpx;
	}

	.seatDemosScroll {
		color: #aaa;
		background: #fff;
		width: 100%;
		height: 100%;
		font-size: 25rpx;
		white-space: nowrap;
	}

	.seatDemosScrollItem {
		height: 90rpx;
		white-space: nowrap;
		overflow: hidden;
		margin-left: 15px;
		display: inline-block;
		align-items: center;
		margin-top: 25rpx;
	}

	.seatDemosScrollItem.Itemnormal image {
		margin-right: 10rpx;
		width: 40rpx;
		height: 40rpx;
		vertical-align: -30%;
	}

	/*
	*情侣座位的图片样式
	*/

	.seatDemosScrollItem.Itemlove image {
		margin: 0;
		width: 40rpx;
		height: 40rpx;
		vertical-align: -30%;
	}

	/*
	*情侣座位的字体样式
	*/

	.seatDemosScrollItem.Itemlove text {
		margin-left: 10rpx;
	}

	.seatDemo image {
		width: 45rpx;
		height: 45rpx;
	}

	/*
	*普通座位的图片样式
	*/

	.seatDemoItem {
		white-space: nowrap;
		width: 45rpx;
		display: block;
	}

	/*
	*情侣座位的图片样式
	*/

	.seatDemo {
		display: flex;
		align-items: center;
	}

	/*
	*情侣座位的字体样式
	*/

	.loveSeatDemo text {
		margin-left: 10rpx;
	}

	/*
	*影厅图上方显示影厅名字区域
	*/

	.hallName {
		width: 200rpx;
		height: 0;
		border-top: 40rpx solid #ccc;
		border-right: 20rpx solid transparent;
		border-left: 20rpx solid transparent;
		line-height: 30rpx;
		color: white;
		position: absolute;
		top: -100rpx;
		z-index: 2;
		left: 50%;
		transform: translateX(-50%);
		white-space: nowrap;
	}

	/*
	*影厅图上方显示影厅名字区域字体样式
	*/

	.hallName text {
		font-size: 20rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: -35rpx;
	}

	/*
	*所有座位的区域
	*/

	.seatArea {
		margin: 0 auto;
		font-size: 10rpx;
		position: relative;
	}

	/*
	*中轴线
	*/

	.alignLine {
		position: absolute;
		left: 50%;
		height: 100%;
		border-left: 1px dashed #aaa;
		transform: translateX(-100%);
	}

	/*
	*选座区域普通座位的图片样式
	*/

	.normal {
		position: relative;
		/* margin: 10rpx; */
		width: 100%;
		height: 100%;
	}

	/*
	*选座区域情侣座位的图片样式
	*/

	.LoveSeat {
		position: relative;
		/* margin: 10rpx 0;  */
		width: 70rpx;
		height: 70rpx;
	}

	/*
	*所有座位的图片样式下方透明可点击区域
	*/

	.seatTap {
		position: absolute;
	}

	/*
	*情侣座位的图片样式下方透明可点击区域
	*/

	.LoveSeatTap {
		position: absolute;
		top: 0;
		width: 70rpx;
		height: 70rpx;
	}

	/*
	* 座位图限制区域
	*/

	movable-area {
		background: #eee;
		overflow: hidden;
	}

	/*
	* 座位图可移动区域(座位图)
	*/

	.movableOne {
		box-sizing: border-box;
		padding: 100rpx 60rpx;
		color: #fff;
	}

	/*
	* 座位图可移动区域(左边座位排号栏)
	*/

	.movableTwo {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 1400rpx;
		width: 30rpx;
		padding: 100rpx 0;
		color: #fff;
	}

	/*
	* (左边座位排号栏整体)
	*/

	.seatTool {
		width: 30rpx;
		padding: 100rpx 0;
		opacity: 0.5;
	}

	.seatToolArea {
		background: rgba(0, 0, 0, 0.2);
		border-radius: 50rpx;
	}

	/*
	* (左边座位排号栏每一个块)
	*/

	.seatTag {
		text-align: center;
		color: rgba(0, 0, 0, 0.5);
	}

	/*
	*页面最下方确认选座区域
	*/

	.orderComfirm {
		background: #fff;
		position: fixed;
		display: flex;
		bottom: 0rpx;
		width: 100%;
		line-height: 100rpx;
		z-index: 3;
	}

	/*
	*页面最下方价格区域
	*/

	.orderPrice {
		text-indent: 30rpx;
		color: black;
		height: 100rpx;
		width: 60%;
	}

	/*
	*页面最下方价格字体样式
	*/

	.orderPrice text {
		color: red;
	}

	/*
	*页面最下方确认选座区域渐变色
	*/

	.comfirm {
		font-weight: 900;
		text-align: center;
		color: white;
		width: 100%;
		background: linear-gradient(to right, #C26DFE, #6F50F5);
		height: 100rpx;
		line-height: 100rpx;
	}

	/*
	*用户选中的座位区域
	*/

	.selectSeatInfo {
		background: #fff;
		position: fixed;
		bottom: 180rpx;
		height: 80rpx;
		width: 100%;
		padding: 10rpx 0;
	}

	/*
	*用户选中的座位详情滑块
	*/

	.scrollSeat {
		height: 90rpx;
		white-space: nowrap;
	}

	/*
	*每块用户选中的座位详情
	*/

	.scrollItem {
		border: 1rpx solid #bbb;
		border-radius: 10rpx;
		width: 180rpx;
		display: inline-block;
		margin-left: 20rpx;
		position: relative;
	}

	/*
	* 快速选座模块
	*/

	.quickItem {
		border: 1rpx solid #bbb;
		color: #aaa;
		font-size: 28rpx;
		border-radius: 10rpx;
		width: 160rpx;
		height: 75rpx;
		line-height: 75rpx;
		text-align: center;
		display: inline-block;
		margin-left: 20rpx;
		position: relative;
	}

	/*
	*每块用户选中的座位详情上方文字
	*/

	.scrollTextTop {
		color: #555;
		text-indent: 30rpx;
		line-height: 25rpx;
		font-size: 26rpx;
		height: 25rpx;
		margin-top: 10rpx;
	}

	/*
	*每块用户选中的座位详情下方文字
	*/

	.scrollTextBottom {
		font-weight: 600;
		font-size: 26rpx;
		color: #ff005a;
		text-indent: 40rpx;
		height: 25rpx;
		line-height: 25rpx;
		margin: 10rpx 0;
	}

	/*
	*每块用户选中的座位详情关闭按钮
	*/

	.scrollItem image {
		position: absolute;
		z-index: 2;
		width: 30rpx;
		height: 30rpx;
		right: 10rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.seatAreaTip {
		position: relative;
		width: 750rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		font-size: 16rpx;
		color: rgba(0, 0, 0, 0.1);
		border-top: 1rpx dashed rgba(0, 0, 0, 0.1);
	}
</style>
